<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="这是一个网页的基础框架">
    <meta name="keywords" content="HTML, 基础框架, 网页模板">
    <meta name="author" content="你的名字">

    <title>从代码到实物</title>

    <!-- 外部CSS样式表 -->
    <link rel="stylesheet" href="style.css">

    <!-- 网站图标 -->
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
    <!-- 页面头部 -->
    <header>
        <h1>环境科学与工程学院 杨政</h1>
    </header>

    <!-- 主要内容区域 -->
    <meta charset="UTF-8" />
  <style>
    body {
      background-color: #FFD580; /* 橙黄色背景 */
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      font-family: Arial, sans-serif;
    }

    .grid-container {
      display: grid;
      grid-template-columns: repeat(6, 60px); /* 6列，每列60px */
      grid-template-rows: repeat(2, 60px);    /* 2行，每行60px */
      gap: 10px; /* 格子之间的间距 */
      margin-top: 50px;
    }

    .cell {
      background-color: #FFA500; /* 橙色格子 */
      border: 1px solid #E69500;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      font-weight: bold;
      color: white;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
  </style>
  <div class="grid-container">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
    <div class="cell">7</div>
    <div class="cell">8</div>
    <div class="cell">9</div>
    <div class="cell">10</div>
    <div class="cell">11</div>
    <div class="cell">12</div>
  </div>
    <!-- 页面底部 -->
    <footer>
        <p>&copy; 2025</p>
    </footer>

    <!-- 外部JavaScript文件 -->
    <script src="script.js"></script>
</body>
</html>